<template>
    <f-button @click="plain = !plain">改变plain</f-button>
    <f-button type="primary" @click="isDisabled = !isDisabled">改变disabled</f-button>
    <f-button type="success" @click="round = !round">改变round</f-button>
    <br>
    <br>
    <f-button :plain="plain" :round="round" :disabled="isDisabled">Default</f-button>
    <f-button :plain="plain" :round="round" :disabled="isDisabled" type="primary">Primary</f-button>
    <f-button :plain="plain" :round="round" :disabled="isDisabled" type="success">Success</f-button>
    <f-button :plain="plain" :round="round" :disabled="isDisabled" type="info">Info</f-button>
    <f-button :plain="plain" :round="round" :disabled="isDisabled" type="warning">Warning</f-button>
    <f-button :plain="plain" :round="round" :disabled="isDisabled" type="danger">Danger</f-button>
    <br>
    <br>
    isDisabled--{{ isDisabled }},plain--{{ plain }}
</template>

<script setup lang="ts">
import { ref } from 'vue';

const isDisabled = ref(false)
const plain = ref(false)
const round = ref(false)

</script>

<style scoped></style>